<template>
    <div class="head">
        <img src="~asim/logo_white.png" class="logo">
        <div class="title">高校毕设智慧管理平台</div>
        <div class="user">
            <div class="date fr_jcae">
                <p v-for="(item,index) in date" :key="index">{{item}}</p>
            </div>
            <div class="info">
                <el-dropdown class="dropdown">
                    <div class="avatar el-dropdown-link">
                        <img :src="avatar" class="img">
                        <p>{{name}}</p>
                    </div>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item class="item"><span @click="$router.push('user')">个人信息</span></el-dropdown-item>
                        <el-dropdown-item class="item"><span @click="signOut" style="color: red;">退出登录</span></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
    </div>
</template>

<script>
import tool from "ut/tool";
export default {
    name: 'WebMyHead',  // 头部
    props: ['info'],
    computed: {
        date(){
            let today = new Date();
            let y = today.getFullYear();
            let m = today.getMonth() + 1;
            let d = today.getDate();
            let week = today.getDay();
            let weeks = ['日','一','二','三','四','五','六']
            return [
                `${y}年${m}月${d}日`,
                `星期${weeks[week]}`
            ]
        },
        avatar(){
            return this.info.avatar || require('asim/avatar_null.png');
        },
        name(){
            let { role,name,nickname } = this.info;
            return role ? name : nickname;
        }
    },
    methods: {
        signOut(){
            this.$confirm('确定退出系统？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$cookies.remove('userInfo');
                this.$router.replace('/login');
                tool.notif('success','成功', '退出成功');
            });
        }
    }
};
</script>

<style lang="less" scoped>
@import "asle/index.less";
.head {
    .size(100%,80px);
    .bg(#5382c3);
    .c(white);
    .padd(0,20px);
    .df();
    .f_ai();
    .f_jc(space-between);
    .logo {
        .h(60px);
        .mar_r(90px);
    };
    .title { .font(22px) };
    .user {
        .size(300px,100%);
        .font(16px);
        .df();
        .date {
            .size(140px,100%);
            .df();
            .f_fd();
            .f_jc();
            .f_ai(flex-end);
        }
        .info {
            .size(160px,100%);
            .mar_l(20px);
            .dropdown {
                .size();
                .avatar {
                    .df();
                    .f_jc();
                    .f_ai();
                    .c(white);
                    .size();
                    .img {
                        .size(40px);
                        .bor_r(50px);
                        .mar_r(10px);
                    }
                }
            }
        }
    }
}
</style>